<template>
  <div ref="select" class="select pointer" @click="show">
    <img :src="selectL" alt="">
    <p class="font-lan-m">{{ modelValue != null ? getLabel(modelValue) : placeholder }}</p>
    <div class="d-flex ai-center">
      <img v-if="modelValue != null  && clear == true" class="clearImg mr-1" :src="clearIcon" alt="" @click.stop="clickClear">
      <img :class="['selectImg', showSelect ? 'rotate' : '']" :src="selectR" alt="">
    </div>
    <div v-show="showSelect" class="selectPopper" ref="selectPopper">
      <div class="selectDropDown">
        <div v-for="(item) in options" :key="item[value]"
          :class="['mb-1', 'selectItem', modelValue == item[value] ? 'active' : '']" @click="clickItem(item)">
          <div class="d-flex jc-between ai-center">
            <p class="font-lan-m">{{ item[label] }}</p>
            <img v-if="modelValue == item[value]" :src="selectL" class="rotate" alt="">
          </div>
        </div>
      </div>
      <span class="popperArrow"></span>
    </div>
  </div>
</template>
  
<script lang="ts">
import {
  ref,
  reactive,
  onMounted,
  onBeforeMount,
  onBeforeUnmount,
  defineComponent,
} from "vue";

// 声明类型
const PropsType = {
  placeholder: {
    type: String,
    default: '',
    require: true
  },
  options: {
    type: Array,
    default: [],
    require: true
  },
  modelValue: {
    type: String,
    default: null,
    require: true
  },
  label: {
    type: String,
    default: 'label',
  },
  value: {
    type: String,
    default: 'value',
  },
  clear:{
    type:Boolean,
    default: false
  }
} as const

// 声明类型
export default defineComponent({
  props: PropsType,
  components: {},
  setup(props, context) {
    //变量
    const select = ref(null)
    const selectPopper = ref(null)
    const selectData = reactive({
      top: 0,
      left: 0,
      minWidth: 0
    })
    const selectL = require("@/assets/img/select-left.png");
    const selectR = require("@/assets/img/select-right.png");
    const clearIcon = require("@/assets/img/close-circle.png");
    const showSelect = ref(false)
    const show = () => {
      let data = select.value.getBoundingClientRect()
      selectData.top = data.top + data.height + 10
      selectData.left = data.left
      selectData.minWidth = data.width
      showSelect.value = !showSelect.value
    }

    const clickClear = () => {
      context.emit('update:modelValue', null)
      context.emit('change', null)
    }

    const clickItem = (val) => {
      context.emit('update:modelValue', val[props.value])
      context.emit('change', val[props.value])
    }

    const getLabel = (val) => {
      return props.options.find(item => item[props.value] == val)[props.label]
    }

    const closeSelectHandler = (e) => {
      // 获取DOM元素的引用
      if(e.target.id == 'select') return
      if (select.value && select.value.contains(e.target)) {
        return;
      }
      showSelect.value = false;
    };

    onBeforeMount(() => {
      // 在DOM元素渲染之前开始监听mousedown事件
      document.body.addEventListener("mousedown", closeSelectHandler);
    });

    onBeforeUnmount(() => {
      // 在Vue文件销毁的时候移除这个事件
      document.body.removeEventListener("mousedown", closeSelectHandler);
    });

    onMounted(() => {
      //

    })

    // return
    return {
      select,
      selectPopper,
      selectL,
      selectR,
      clearIcon,
      showSelect,
      selectData,
      clickClear,
      getLabel,
      show,
      clickItem
    };
  },

});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 4px 8px;
  background: linear-gradient(90deg, rgba(82, 147, 204, 0) 0%, #5293CC 47%, rgba(82, 147, 204, 0) 100%);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0)) 1 1;

  .title {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 20px;
  }

  .clearImg{
    width: 16px;
    height: 16px;
  }
  .selectImg {
    transition: transform 0.3s;
    transform: rotate(0);
  }

  .rotate {
    transform: rotate(-180deg);
  }

  --inset: v-bind(`${selectData.top}px auto auto ${selectData.left}px`);
  --min-width: v-bind(`${selectData.minWidth}px`);
  .selectPopper {
    position: fixed;
    inset: var(--inset);
    z-index: 2000;
    min-width: 50px;
    color: #fff;
    background: rgba(20, 69, 102, 1);
    border-radius: 4px;
    opacity: 1;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    .selectDropDown {
      min-width: var(--min-width);
      padding: 8px 16px;

      .selectItem {
        padding: 4px 8px;
      }

      .selectItem:hover {
        background: linear-gradient(270deg, #529ACC00 0%, #8AC1E5 100%);
      }

      .active {
        background: linear-gradient(270deg, #ccb17a00 0%, #E5D38A 100%);
        opacity: 1;
      }
    }

    .popperArrow {
      position: absolute;
      left: 50%;
      top: -5px;
      transform: translateX(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      background: rgba(60 ,114 ,151, 1);
      z-index: -1;
    }
  }
}</style>
  